<template>
  <div class="songList fill" ref="scroller">
    <div class="infosArea flex-row pl w-fill">
      <WIcon :icon="songListDetail.logo" size="200" border-radius="0"/>
      <div class="content mll flex-1 flex-col justify-between">
        <div class="title">{{songListDetail.dissname}}</div>
        <div class="userTag flex-row items-center">
          <WIcon :icon="songListDetail.headurl"/>
          <div class="userName">{{songListDetail.nickname}}</div>
          <div class="tag text-info mnl" v-for="(tag, index) in songListDetail.tags" :key="index">#{{tag.name}}</div>
        </div>
        <div  class="desc w-fill pnr text-info no-wrap" v-text="songListDetail.desc"></div>
        <div class="ctrl flex-row">
          <div class="btn" @click="handlePlayAll"><WIcon icon="icon-play-all"/>播放全部</div>
          <div class="btn" @click="handleToggleLike"><ILike :like="isLike"/>{{isLike?"取消收藏":"收藏"}}</div>
        </div>
      </div>
    </div>
    <div class="listArea">
      <ListDisplay ref="list" :list="songListDetail.songlist"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import {Path} from "@/ts.d/interfaces/Path";
import {qqMusicApi} from "@/network/qqmusic";
import {SongListDetail} from "@/ts.d/classes/SongListDetail";
import WIcon from "@/components/icon/WIcon.vue";
import ILike from "@/components/icon/ILike.vue";
import ListDisplay from "@/components/listDisplay/ListDisplay.vue";
import {Action, State} from "vuex-class";
import {SongListItem} from "@/ts.d/classes/SongListItem";
@Component({
  components: {ListDisplay, ILike, WIcon}
})
export default class SongList extends Vue {
  @State("like") like !: {songList: SongListItem[]}

  @Action("toggleLike") toggleLike!: (payload: {type: "songList"; item: SongListItem}) => void

  @Prop() path!: Path

  songListDetail: SongListDetail = new SongListDetail()


  get isLike() {
    return this.like.songList.findIndex(item=> item.mid === this.path.mid) !== -1
  }


  fetchSongListDetail() {
    qqMusicApi.getSongList(this.path.mid as number).then(ret=>{
      Object.assign(this.songListDetail, ret.data,)
      this.songListDetail.songlist = this.songListDetail.songlist.map((item)=>({
        ...item,
        name: item.songname,
        mid: item.songmid,
        albumMid: item.albummid,
        albumName: item.albumname,
      }))
    })
  }

  handleToggleLike() {
    this.toggleLike({type:"songList", item:{
        mid: this.path.mid as number,
        cover: this.songListDetail.logo,
        creator: this.songListDetail.nickname,
        title: this.songListDetail.dissname,
        listenCount: 0,
        userName: this.songListDetail.nickname,
        type: "songList"
      }})
  }

  handlePlayAll() {
    (this.$refs.list as any).handlePlay(0)
  }

  mounted() {
    this.fetchSongListDetail()
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
.songList{
  overflow: auto;
  .title{
    font-weight: 600;
    font-size: 30px;
  }
  .infosArea{
    height: 260px;
    .content{
      overflow: hidden;
    }
  }
  .listArea{
  }
}

.ctrl{
  .btn{
    cursor: pointer;
    text-align: center;
    padding: $pn 0;
    margin-right: $mn;
    width: 120px;
    background-color: #826ec9;
    border-radius: $border-radius-lx;
    &:hover{
      background-color: #6043c4;
    }
  }
}
</style>
